<template>
  <div class="page-left">
    <div class="top">
      <div class="title">程序员逐年数量</div>
      <div class="content">
        <div class="year-bar" ref="yearBar"></div>
      </div>
    </div>
    <div class="center">
      <div class="title">语言排行榜</div>
      <div class="content">
        <div class="rank-bar" ref="rankBar"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">程序员年龄分布</div>
      <div class="content">
        <div class="age-pie" ref="agePie"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import { OptionFun as yearOption } from "../ts/chartYearBar";
import { OptionFun as rankOption } from "../ts/chartRankLine";
import { OptionFun as ageOption } from "../ts/chartAgePie";
const yearBar = ref<HTMLDivElement | null>(null);
const rankBar = ref<HTMLDivElement | null>(null);
const agePie = ref<HTMLDivElement | null>(null);

let yearBarChart: any;
let rankLineChart: any;
let agePieChart: any;
const yearData = reactive({
  XData: ["2021", "2022", "2023", "2024"], // X轴数据
  data: [
    {
      name: "前端程序员",
      data: [123, 179, 255, 285],
    },
    {
      name: "后端程序员",
      data: [405, 512, 685, 723],
    },
  ],
  colorList: ["0, 255, 255", "62, 253, 3", "253, 250, 3"], // 图表色卡
  legendShow: true, // 是否显示图例
  legendSingle: false, // 图例单选or多选
});
const rankData = reactive({
  XData: ["2021", "2022", "2023", "2024"], // X轴数据
  data: [
    {
      name: "Python",
      data: [257, 364, 426, 498],
    },
    {
      name: "C++",
      data: [240, 368, 420, 459],
    },
    {
      name: "C",
      data: [215, 320, 399, 425],
    },
    {
      name: "Java",
      data: [350, 375, 398, 402],
    },
    {
      name: "JavaScript",
      data: [120, 179, 257, 395],
    },
    {
      name: "Go",
      data: [75, 157, 240, 360],
    },
  ],
  colorList: [
    "0, 255, 255",
    "62, 253, 3",
    "253, 250, 3",
    "97,255,182",
    "57,255,18",
    "58,115,192 ",
  ], // 图表色卡
  legendShow: true, // 是否显示图例
  legendSingle: false, // 图例单选or多选
});
const ageData = reactive({
  data: [
    {
      value: 35,
      name: "20-25",
    },
    {
      value: 40,
      name: "25-30",
    },
    {
      value: 25,
      name: "30+",
    },
  ],
  colorList: [
    "0, 255, 255",
    "62, 253, 3",
    "253, 250, 3",
    "97,255,182",
    "57,255,18",
    "58,115,192 ",
  ], // 图表色卡
  legendShow: true, // 是否显示图例
  legendSingle: false, // 图例单选or多选
});
function initYearBar() {
  if (yearBarChart) {
    yearBarChart.clear();
  }
  yearBarChart = echarts.init(yearBar.value);
  yearBarChart.setOption(yearOption(yearData));
}
function initRankLine() {
  if (rankLineChart) {
    rankLineChart.clear();
  }
  rankLineChart = echarts.init(rankBar.value);
  rankLineChart.setOption(rankOption(rankData));
}
function initAgePie() {
  if (agePieChart) {
    agePieChart.clear();
  }
  agePieChart = echarts.init(agePie.value);
  agePieChart.setOption(ageOption(ageData));
}
onMounted(() => {
  initYearBar();
  initRankLine();
  initAgePie();
});
</script>

<style lang="scss" scoped>
.page-left {
  width: 25%;
  height: 100%;
  background: url("@/assets/img/screen/bg_asid.png") no-repeat;
  background-size: 100% 100%;
  .title {
    width: 100%;
    height: 52.5px;
    line-height: 52.5px;
    text-indent: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #fff;
  }
  .content {
    height: calc(100% - 52.5px);
    width: 100%;
  }
  .top,
  .center,
  .bottom {
    width: 100%;
    height: 33.33%;
  }
  .year-bar,
  .rank-bar,
  .age-pie {
    width: 100%;
    height: 100%;
  }
}
</style>